<template>
  <div class="vip_sec" ref="vip_sec">
    <div class="viplist">
      <div class="listItem" v-for="(item) in facelist" v-bind:key="item.id">
        <img :src="imgUrl + item.imageidInFtp" :style="{width:imgSize,height:imgSize}">
        <p>{{item.staticFaceDb.name}}</p>
      </div>
    </div>
    <img :src="welcome"/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        facelist: [],
        imgUrl: 'http://10.10.10.85:6868/face/downloadftpPic?fileName=',
        welcome: require('@/assets/img/welcome.png'),
        vipids: [],
        interval: '',
        latestId: '',
        imgSize: ''
      }
    },
    methods: {
      getLatest() {
        var vm = this
        clearInterval(vm.interval)
        var latestid = vm.latestId === '' ? 0 : vm.latestId
        vm.axios.get(vm.FSA + '/face/latestVisitor?id=' + latestid).then(function (res) {
          for (var i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].faceBaseId === 'vip' && vm.vipids.indexOf(res.data.data[i].staticFaceDb.id) < 0) {
              vm.facelist.push(res.data.data[i])
              vm.vipids.push(res.data.data[i].staticFaceDb.id)
            }
          }
          vm.latestId = res.data.data.length > 0 ? res.data.data[res.data.data.length - 1].id : vm.latestId
        }).catch(function (error) {
          console.log(error)
        })
        vm.interval = setInterval(() => {
          vm.getLatest()
        }, 1000)
      }
    },
    mounted() {
      var vm = this
      vm.imgSize = (vm.$refs['vip_sec'].getBoundingClientRect().width / 10) + 'px'
      window.onresize = () => {
        vm.imgSize = (vm.$refs['vip_sec'].getBoundingClientRect().width / 10) + 'px'
      }
      vm.getLatest()
    }
  }
</script>
